<script setup lang="ts">
import { ref,onMounted } from "vue";
import { useSlotManagementStore } from '@/store/slot_mangement';
import useassign from '@/hooks/slot_management/assign_slot'
import helperprint from '@/hooks/print/helper_print'
const SlotManagementStore = useSlotManagementStore();
//@ts-ignore
import { throttle } from 'lodash';
//@ts-ignore
import assign_template from "./assign_template.js"


const {
    getassign,
    dialog,
    getloction,
    confirmAssign,
} = useassign()

const {
    buildDesigner,
    print2
}= helperprint()

onMounted(() => {
    buildDesigner(assign_template);
});
const childBorder = ref(false)
let con=ref('');

let screenHeight = ref(window.innerHeight - 260);
window.addEventListener('resize', function () {
    screenHeight.value = window.innerHeight - 260;
});

// 刷新 节流函数
const throttleAssign = throttle((con: string) => getassign(con), 3000, {
    leading: true, // 第一次触发立即执行
    trailing: false // 最后一次触发不执行
});

// 分配货位 节流函数
const throttleLocation = throttle((ConCaseNo: string, ContractNo: string, CaseNo: string, CN_Name: string, EN_Name: string, print_date: string, LocationID: string,Size:string,G_Weight:string) => getloction(ConCaseNo, ContractNo, CaseNo, CN_Name, EN_Name, print_date, LocationID,Size,G_Weight), 3000, {
    leading: true, // 第一次触发立即执行
    trailing: false // 最后一次触发不执行
});


// 表格行样式
interface Locationtable {
    RemCap: number
}

const tableRowClassName = ({
    row,
}: {
    row: Locationtable,
}) => {
    if (row.RemCap <= 0) {
        return 'warning-row'
    }
    return ''
}

function getFormattedDate() {
    const date = new Date();
    return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}

</script>

<template>
    <el-card>
        <el-form @submit.native.prevent class="form" :inline="true">
            <el-form-item>
                <el-button type="primary" @click="throttleAssign(con)" v-has="`btn_assign_refresh`"
                    style="margin-left: 15px;">刷新</el-button>
            </el-form-item>

            <el-form-item label="合同号查询:">
                <el-input v-model="con" placeholder="请输入合同号"></el-input>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <el-scrollbar :height="screenHeight"> <!-- 菜单滚动条 -->
            <el-table :data="SlotManagementStore.assigntableData_pinia" :height="screenHeight" style="width: 100%">
                <el-table-column prop="ConCaseNo" label="合同箱号"></el-table-column>
                <el-table-column prop="ContractNo" label="合同号"></el-table-column>
                <el-table-column prop="CaseNo" label="箱号"></el-table-column>
                <el-table-column prop="CN_Name" label="国家(中)"></el-table-column>
                <el-table-column prop="EN_Name" label="国家(英)"></el-table-column>
                <el-table-column prop="Size" label="尺寸"></el-table-column>
                <el-table-column prop="PackageType_C" label="包装材质"></el-table-column>
                <el-table-column prop="LocationID" label="货位"></el-table-column>
                <el-table-column prop="G_Weight" label="毛重"></el-table-column>
                <el-table-column label="操作" width="160">
                    <template #default="scope">
                        <el-button size="small" :type="scope.row.LocationID === '' ? 'success' : 'warning'"
                            @click="throttleLocation(scope.row.ConCaseNo, scope.row.ContractNo, scope.row.CaseNo,scope.row.CN_Name,scope.row.EN_Name,getFormattedDate(), scope.row.LocationID,scope.row.Size,scope.row.G_Weight)"
                            v-has="`btn_assign_location`">{{ scope.row.LocationID === '' ? '分配货位' : '修改货位' }}</el-button>
                        <el-button size="small" type="danger" @click="print2({ConCaseNo:scope.row.ConCaseNo, ContractNo:scope.row.ContractNo,CaseNo:scope.row.CaseNo,CN_Name:scope.row.CN_Name,EN_Name:scope.row.EN_Name,print_date:getFormattedDate(),LocationID:scope.row.LocationID,print_size:scope.row.Size,print_wg:scope.row.G_Weight})" v-has="`btn_assign_print`">打印</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </el-card>

    <!-- 抽屉 添加/编辑用户 -->
    <el-drawer ref="drawerRef" v-model="dialog" title="分配货位" size="40%">
        <el-scrollbar :height="screenHeight+160"> <!-- 菜单滚动条 -->
            <el-table :data="SlotManagementStore.locationtableData_pinia" :row-class-name="tableRowClassName" 
                :height="screenHeight+160" style="width: 100%">
                <el-table-column type="expand">
                    <template #default="props">
                        <div m="4" >
                        <el-table :data="props.row.family" :border="childBorder">
                            <el-table-column prop="ContractNo" label="合同号"/>
                            <el-table-column prop="CaseNo" label="箱号" />
                            <el-table-column prop="Size" label="尺寸" />
                            <el-table-column prop="PackageType_C" label="包装材质" />
                        </el-table>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="LocationID" label="货位"></el-table-column>
                <el-table-column prop="MaxPallets" label="最大容量"></el-table-column>
                <el-table-column prop="RemCap" label="剩余容量"></el-table-column>
                <el-table-column prop="Note" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                            icon="InfoFilled" icon-color="#626AEF" title="是否确认分配?"
                            @confirm="confirmAssign(scope.row.LocationID,print2)">
                            <template #reference>
                                <el-button type="success" size="small">确认</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </el-drawer>
</template>

<style lang="css" scoped>
::v-deep .el-table .warning-row {
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.2);
}

::v-deep .el-table__expanded-cell {
    background-color: red;
}

</style>